<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{:session('cp.cpsysname')}--系统管理平台</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="{:config('webconfig.description');}">
        <meta name="keywords" content="{:config('webconfig.keywords');}">
        <meta name="author" content="runoob">
        <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
        <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
        <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="__STATIC_URL__/static/js/echarts.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    {include file='public/header'/}
    <!------------------导航-------------------------->
    <section id="content">
        {include file='public/left'/}
        <!--------------------------主要内容区域------------------------------------->
        <div class="content">
            <div class="page-heading mgl15 mgr15">
                <ol class="breadcrumb">
                    <li>
                        当前位置是:
                    </li>
                    <li class="active" style="color: #02b87f;"> 首页</li>
                </ol>
            </div>
            <div class="panel panel-default mgl15 mgr15">
                <div class="panel-heading">
                    <h3 class="panel-title"><span style="color:#02b87f">门店运营情况
                        </span><span style="font-size: 14px;">(统计时间：{:date('Y-m-d H:i:s')}，手动刷新可查看最新数据)</span>
                    </h3>
                </div>
                <div class="information panel-body">
                    <div class="col-md-7 col-xs-7 col-sm-7 index-left-style">
                        <div class="wrap col-sm-6">
                            <div class="wrap_in">
                                <div class="pull-left">
                                    <img style="width:100%;height: 100%;" src="__STATIC_URL__/static/images/daymoney.png"/>
                                </div>
                                <div class="pull-left text-center">
                                    <p class="value">{$ordercount}</p>
                                    <p>今日订单(笔)</p>
                                </div>
                            </div>
                        </div>
                        <div class="wrap col-sm-6">
                            <div class="wrap_in">
                                <div class="pull-left">
                                    <img style="width:100%;height: 100%;" src="__STATIC_URL__/static/images/weekmoney.png"/>
                                </div>
                                <div class="pull-left text-center">
                                    <p class="value">{$pointcount}</p>
                                    <p>今日交易额(元)</p>
                                </div>
                            </div>
                        </div>
                        <div class="wrap col-sm-6">
                            <div class="wrap_in">
                                <div class="pull-left">
                                    <img style="width:100%;height: 100%;" src="__STATIC_URL__/static/images/merchant.png"/>
                                </div>
                                <div class="pull-left text-center">
                                    <p class="value">{$machcount}</p>
                                    <p>交易商户数(户)</p>
                                </div>
                            </div>
                        </div>
                        <div class="wrap col-sm-6">
                            <div class="wrap_in">
                                <div class="pull-left">
                                    <img style="width:100%;height: 100%;" src="__STATIC_URL__/static/images/week.png"/>
                                </div>
                                <div class="pull-left text-center">
                                    <p class="value">{$pointweekcount}</p>
                                    <p>本周交易额(元)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 index-left-style">
                        <div class="wrap col-sm-12">
                            <div class="wrap_in">
                                <div class="pull-left">
                                    <img style="width:100%;height: 100%;" src="__STATIC_URL__/static/images/month.png"/>
                                </div>
                                <div class="pull-left text-center">

                                    <p class="value">{$pointmoncount?$pointmoncount:'暂无数据'}</p>
                                    <p class="">当月交易额(元)</p>
                                </div>
                            </div>
                        </div>
                        <div class="wrap col-sm-12">
                            <div class="wrap_in">
                                <div class="pull-left">
                                    <img style="width:100%;height: 100%;" src="__STATIC_URL__/static/images/year.png"/>
                                </div>
                                <div class="pull-left text-center">
                                    <p class="value" >{$pointyearcount?$pointyearcount:'暂无数据'}</p>
                                    <p>年交易额(元)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="analyze  clearfix mgl15 mgr15" style="width: auto;">
                <div class="col-sm-7 col-xs-7 col-md-7">
                    <div class="mgl15 mgr15">
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height:350px;"></div>
                    </div>
                </div>
                <div class="col-md-5 col-sm-5 col-xs-5">
                    <table class="table table-bordered index-bottom-table">
                        <caption>最近消费<span>TOP6</span><a style="float:right" href="{:url('Pay/paylog')}">更多<span style="font-size: 12px;color:#777;" class="glyphicon glyphicon-chevron-right"></span></a></caption>
                        <thead>
                        <tr class="">
                            <th>门店</th>
                            <th>交易金额(元)</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="paylog5" id="vo"}
                            <tr>
                                <td>{:getmachname($vo['mid'])}</td>
                                <td>{$vo.price}</td>
                            </tr>
                        {/volist}

                        </tbody>
                    </table>
                </div>
            </div>
            {include file='public/footer'/}
        </div>
    </section>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var symbolSize = 8;
    // 指定图表的配置项和数据
    var datas = {$tongji2['riqi']};
    var prices = {$tongji2['price']};
    var orders = {$tongji2['order']};
    var option = {
        title: {
            top: -10,
            left: 30,
            text: '近10天交易'
        },
        tooltip: {
            trigger: 'axis',
            show: true,
            padding: 10,
            formatter: function (params, ticket, callback) {
                var res = params[0].name + '<br/>' + params[0].seriesName + ":" + params[0].value + '<br/>' + params[1].seriesName + ":" + params[1].value;
                return res;
            },
            default: true
        },
        grid:{					//图表显示在容易的位置
            x:50,
            y:80,
            x2:40,
            y2:40,
            borderWidth:1
        },
        //图表显示在容器的位置
        legend: {
            right: 'center',
            top: 20,
            orient: 'horizontal',
            data: ['交易金额', '交易笔数'],
            itemGap: 50				//图标间距
        },

        xAxis: {
            data: datas,
            axisLabel: {
                interval: 0,
                rotate: -20,
            }
        },
        yAxis: [
            {
                name: '交易金额',
                nameLocation: 'end',
                type: 'value',
                inverse: false,
                splitLine: {
                    show: false
                },
            },
            {
                name: '交易笔数',
                nameLocation: 'end',
                type: 'value',
                inverse: false,
                splitLine: {
                    show: false
                }
            }
        ],
        series: [{
                name: '交易金额',
                type: 'line',
                smooth: true,   //是否为平滑曲线
                symbolSize: symbolSize,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: prices
            }, {
                name: '交易笔数',
                type: 'line',
                smooth: true,   //是否为平滑曲线
                symbolSize: symbolSize,
                yAxisIndex: 1,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: orders
            }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;


</script>
<script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
</html>
